<template>
    <!--巨幕-->
     <el-carousel trigger="click" style="width: 100%">
        <el-carousel-item v-for="(item,index) in carouselItemsList" :key="index">
            <div class="jumbotron">
                <div class="bg" style="height:300px">
                    <h1>{{item.title}}</h1>
                    <div style="margin: 0px auto; width: 50%;">
                        <el-divider style="width: 600px"></el-divider>
                    </div>
                    <el-button type="success" round plain>开始学习</el-button>
                </div>
            </div>
        </el-carousel-item>
     </el-carousel>
</template>

<script>
    export default {
        name: "Carousel",
        data(){
            return{
                carouselItemsList:[
                    {
                        title:'Java全栈学习线路',
                        actionUrl:'#'
                    },
                    {
                        title:'Python自动化学习线路',
                        actionUrl:'#'
                    },
                    {
                        title:'大数据运维学习线路',
                        actionUrl:'#'
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    @import "../../assets/vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css";
    @import "../../assets/minified_css/index.min.css";


    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .bg h1{
        padding: 0px;
        margin: 60px;
        font-size: 40pt;
        text-shadow: 2px 2px 2px #999999;
        color: #FFF;
    }

    .bg h3{
        padding: 0px;
        margin: 0px;
        font-size: 20pt;
        color: #FFF;
    }

</style>